<template>
    <div id="background">
        <div class="title animate__animated animate__rubberBand">
            {{ title }}
        </div>
        <div class="content animate__animated animate__rubberBand">
            <login v-if="isShow" @switch-page="switchPage" />
            <regist v-else @switch-page="switchPage" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import Login from "@/views/index/Login.vue";
import Regist from "@/views/index/Regist.vue";
import { Dancer } from "@/utils/three";

//读取全局配置文件中的标题
const title: any = ref<string>(import.meta.env.VITE_APP_TITLE);

//是否展示
const isShow: any = ref<boolean>(true);

//改变页
const switchPage = (show: boolean) => (isShow.value = show);

//背景
const background = ref<any>(null);

//初始化背景
onMounted(() => {
    background.value = new Dancer("background");
});

//销毁背景
onBeforeUnmount(() => {
    background.value?.dispose();
});
</script>

<style scoped lang="less">
#background {
    overflow: hidden;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    .title {
        position: absolute;
        font-size: 2.5rem;
        font-weight: bold;
        font-family: "Microsoft YaHei";
        mix-blend-mode: multiply;
        -webkit-text-stroke: 1px #444343;
        color: rgba(81, 18, 240, 0.9);
        top: 10vh;
        text-shadow: 2px 4px 3px rgba(30, 29, 29, 0.3);
    }
    .content {
        position: absolute;
        border: 2px solid rgba(158, 241, 179, 0.2);
        border-radius: 20px;
        padding: 10px;
        width: 30vw;
        background-color: rgba(8, 8, 8, 0.3);
        top: calc(10vh + 2.5rem + 15px);
    }
}
</style>
